<template>
  <div class="tw-libname">
    <el-row class="tac">
      <el-menu
      :default-active="value"
      class="el-menu-vertical-demo"
      @select="selectValue"
      :style="{backgroundColor:bgColor,fontSize: fontSize,color: color}">
        <el-menu-item
          ref="menuItem"
          :index="item.value"
          v-for="item in menuList"
          @mouseenter.native="changeEnter($event, item.value)"
          @mouseleave.native="changeLeave($event, item.value)"
          @click.native="changeValue($event, item)"
          :class="{'actives': value === item.value}"
          :key="item.value">
          <span slot="title">{{item.name}}</span>
        </el-menu-item>
      </el-menu>
    </el-row>
  </div>
</template>

<script>
import props from './props'

export default {
  name: 'lib-name',

  props,
  methods: {
    setStyle () {
      const style = `
      .el-menu-item:focus {
        background-color: ${this.bgColor};
      }
      .el-menu-item {
        color: ${this.color}
      }
      .el-menu-vertical-demo .el-menu-item:hover {
        outline: 0;
        background-color: ${this.chooseBgColor};
        color: ${this.chooseColor};
      }
      .el-menu-item.actives {
        outline: 0;
        background-color: ${this.chooseBgColor};
        color: ${this.chooseColor};
      }
      `
      const styleEl = document.createElement('style')
      styleEl.innerText = style.replace(/\n/g, '')

      document.head.appendChild(styleEl)
    },
    changeEnter ($event, value) {
      this.$nextTick(() => {
        this.$emit('foucs', value)
        this.value = value
      })
    },
    changeLeave ($event, value) {
      this.$nextTick(() => {
        this.value = value
      })
    },
    changeValue ($event, item) {
      this.$emit('choose', item.value)
      this.value = item.value
    },
    selectValue (index) {
      this.value = index
      this.$nextTick(() => {
        this.menuList.forEach(item => {
          if (item.value === index && item.src) {
            this.$router.push({ path: item.src })
          }
        })
      })
    }
  },
  computed: {
    style () {
      return {
        color: this.color,
        bgColor: this.bgColor,
        chooseBgColor: this.chooseBgColor,
        chooseColor: this.chooseColor
      }
    }
  },
  mounted () {
    this.setStyle()
  },

  watch: {
    style: {
      deep: true,
      handler () {
        this.setStyle()
      }
    }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
